<template>
	<view class="content mt-20px bg-white rounded-20px">
		<view class="title p-20px flex flex-x-between" v-if="title">
			<view class="flex flex-y-center">
				<view class="titleIcon w-10px h-full mr-10px rounded-10px"></view>
				<text>{{title}}</text>
			</view>
			<view>
				<slot name="titleExtra"></slot>
			</view>
		</view>

		<slot name="content"></slot>
	</view>
</template>

<script name="DataCard" setup>
	const props = defineProps({
		title: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss">
	.titleIcon {
		background: rgb(57, 138, 222)
	}
</style>